<template>
  <div>
<!--    <canvas id="myCanvas1" data-percent="80">-->
<!--      您的浏览器不支持canvas标签。-->
<!--    </canvas>-->
<!--    <span style="display:block;position:absolute;top:.94rem;left:.3rem;width:2rem;text-align:center;font-size:.5rem;font-family:microsoft Yahei" id="dushu" >0</span>-->
  </div>
</template>

<script>
export default {
  name: "board3",
  data() {
    return {
      pper: '',
      pper_interal: '',
      dushu: null
    }
  },
  mounted() {
    // this.dushu = document.getElementById('dushu');
    // this.drawCanvanPercent('myCanvas1', 'rem', 2, '#0e9cfa', 0.2, '#fff');
  },
  methods: {
    drawCanvanPercent(ele_id, dw, cir_r, cir_color, line_w, fill_color) {
      let n = this
      if (dw == "rem") {
        cir_r = cir_r * (window.screen.width / 10);
        line_w = line_w * (window.screen.width / 10);
      }
      let canvas = document.getElementById(ele_id);
      let circle = {
        r: cir_r / 2,   //圆的半径
        per: canvas.getAttribute('data-percent'),   //百分比分子
        color: cir_color,   //圆的颜色
        lineWidth: line_w   //圆的颜色
      };
      canvas.width = canvas.height = circle.r * 2;
      canvas.style.borderRadius = "50%";
      if (canvas.getContext) {
        let ctx2 = canvas.getContext("2d");
        ctx2.fillStyle = fill_color;
        ctx2.arc(circle.r, circle.r, circle.r - circle.lineWidth / 2, 0, Math.PI * 2, false);
        ctx2.fill();
        let ctx = canvas.getContext("2d");
        this.pper_interal = setInterval(function () {
          n.drawMove(ctx, circle);
        }, 10);
      }
    },
    drawMove(ctx, circle) {
      if (this.pper >= circle.per) {
        this.pper = circle.per;
        clearTimeout(this.pper_interal);
      } else {
        this.pper++;
      }
      this.dushu.innerText = this.pper + '%';
      ctx.beginPath();
      ctx.strokeStyle = circle.color;
      ctx.lineWidth = circle.lineWidth;
      ctx.arc(circle.r, circle.r, circle.r, 0, Math.PI * (this.pper / 100) * 360 / 180, false);
      ctx.stroke();
    }
  }
}
</script>

<style scoped>
/*div{margin:1rem;background:#eee;padding:.3rem; position:relative }*/
div canvas {
  background: #cacaca;
  -webkit-transform: rotateZ(-270deg);
  transform: rotateZ(-270deg);
  -webkit-animation: ani01 1s ease 0s both;
  animation: ani01 1s ease 0s both;
}

@-webkit-keyframes ani01 {
  0% {
    -webkit-transform: scale(.5, .5) rotateZ(-270deg);
    transform: scale(.5, .5) rotateZ(-270deg);
  }
  100% {
    -webkit-transform: scale(1, 1) rotateZ(-90deg);
    transform: scale(1, 1) rotateZ(-90deg);
  }
}

@keyframes ani01 {
  0% {
    -webkit-transform: scale(.5, .5) rotateZ(-270deg);
    transform: scale(.5, .5) rotateZ(-270deg);
  }
  100% {
    -webkit-transform: scale(1, 1) rotateZ(-90deg);
    transform: scale(1, 1) rotateZ(-90deg);
  }
}
</style>
